/**
 * 目标1：默认显示-北京市天气
 *  1.1 获取北京市天气数据
 *  1.2 数据展示到页面
 */

// 获取并渲染城市天气函数
const getWeather = async (cityCode) => {
  // 获取天气数据
  const response = await axios('http://hmajax.itheima.net/api/weather', { params: { city: cityCode } })
  console.log(response.data)
  const data = response.data.data
  // 展示数据
  document.querySelector('.dateShort').innerHTML = data.date
  document.querySelector('.dateLunar').innerHTML = data.dateLunar
  document.querySelector('.area').innerHTML = data.area
  // 当天的气温
  const nowWStr = `
  <div class="tem-box">
        <span class="temp">
          <span class="temperature">${data.temperature}</span>
          <span>°</span>
        </span>
      </div>
      <div class="climate-box">
        <div class="air">
          <span class="psPm25">${data.psPm25}</span>
          <span class="psPm25Level">${data.psPm25Level}</span>
        </div>
        <ul class="weather-list">
          <li>
            <img src="${data.weatherImg}" class="weatherImg" alt="">
            <span class="weather">${data.weather}</span>
          </li>
          <li class="windDirection">${data.windDirection}</li>
          <li class="windPower">${data.windPower}</li>
        </ul>
      </div>
      `
  document.querySelector('.weather-box').innerHTML = nowWStr

  // 当天的天气
  const twObj = data.todayWeather
  const todayWStr = `
    <div class="range-box">
        <span>今天：</span>
        <span class="range">
          <span class="weather">${twObj.weather}</span>
          <span class="temNight">${twObj.temNight}</span>
          <span>-</span>
          <span class="temDay">${twObj.temDay}</span>
          <span>℃</span>
        </span>
      </div>
      <ul class="sun-list">
        <li>
          <span>紫外线</span>
          <span class="ultraviolet">${twObj.ultraviolet}</span>
        </li>
        <li>
          <span>湿度</span>
          <span class="humidity">${twObj.humidity}</span>%
        </li>
        <li>
          <span>日出</span>
          <span class="sunriseTime">${twObj.sunriseTime}</span>
        </li>
        <li>
          <span>日落</span>
          <span class="sunsetTime">${twObj.sunsetTime}</span>
        </li>
      </ul>
    </div>
  `
  document.querySelector('.today-weather').innerHTML = todayWStr

  // 七日天气预报数据展示
  const dayForecast = data.dayForecast
  const dayForecastStr = dayForecast.map(item => {
    return `
      <li class="item">
          <div class="date-box">
            <span class="dateFormat">${item.dateFormat}</span>
            <span class="date">${item.date}</span>
          </div>
          <img src="${item.weatherImg}" alt="" class="weatherImg">
          <span class="weather">${item.weather}</span>
          <div class="temp">
            <span class="temNight">${item.temNight}</span>-
            <span class="temDay">${item.temDay}</span>
            <span>℃</span>
          </div>
          <div class="wind">
            <span class="windDirection">${item.windDirection}</span>
            <span class="windPower">&lt;${item.windPower}</span>
          </div>
        </li>
    `
  }).join('')

  document.querySelector('.week-wrap').innerHTML = dayForecastStr
}

// m默认进入网页 - 就要获取天气数据（北京城市编码就是 ‘110100’）
getWeather('110100')

// 搜索城市列表
document.querySelector('.search-city').addEventListener('input', async e => {
  console.log(e.target.value)
  const response = await axios('http://hmajax.itheima.net/api/weather/city', { params: { city: e.target.value } })
  const cityStr = response.data.data.map(item => {
    return `<li class="city-item" data-code="${item.code}">${item.name}</li>`
  }).join('')
  document.querySelector('.search-list').innerHTML = cityStr
  document.querySelector('.search-list').addEventListener('click', e => {
    console.log(e.target.dataset.code)
    getWeather(e.target.dataset.code)
  })
  // document.querySelector('.search-list').addEventListener('click', ee => {
  //   const num = response.data.data.filter(item => {
  //     return item.name === ee.target.innerHTML
  //   })
  //   console.log(num)
  //   if (num.length > 0) getWeather(num[0].code)
  // })
})
